<template>
  <div>
    <div class="docker">
      <div div="container">
        <!-- nav -->
        <div class="nav">
          <a style="color:#DE4323;margin-left: 150px;"><router-link to="/login">亲，请登录</router-link></a>
          <a class="div">免费注册</a>
          <a class="div"></a>
          <a class="div"></a>
          <a style="margin-left: 400px;"></a>
          <a class="push"></a>
          <a class="push">
            <router-link to="/">科购首页</router-link>
          </a>
          <a class="push"><img src="../assets/car.png">&nbsp购物车</a>
          <a class="push">订单详情</a>
          <a class="push">充值页面</a>
          <a class="push">
            <router-link to="/feedback">用户反馈</router-link>
          </a>
          <a class="push"></a>
        </div>
        <!-- main -->
        <div class="main">
          <div class="logo">
            <h1>科购</h1>
            <p>KeGou</p>
          </div>
        </div>
      </div>
    </div>
    <div class="docker">
      <div class="container">
        <div class="row">
          <div class="col-4"></div>
          <div class="col-4 mt-3">
            <form action="" class="border was-validated pl-5 pr-5 pt-5"
                  style="width: 500px;border-radius: 20px;background: rgba(255, 255, 255, 0.9);">
              <div class="form-row mb-0">
                <h2><b>找回密码</b></h2>
              </div>
              <!--文本输入框-->
              <div class="form-group"><input type="text" v-model="email" id="username" class="form-control"
                                             placeholder="请输入你的邮箱">
              </div>
              <!--  <div class="form-group"><input type="text" id="yzm" class="form-control"
                                               placeholder="请输入你的验证码">-->
              <div class="form-group" style="margin-bottom: 20px">
                <input type="text" v-model="code" class="form-control"
                       placeholder="验证码" style="width: 200px;float: left">
                <el-button type="success" value="获取验证码" name="yzm" class="yzm"
                           style="float: right;margin-bottom: 23px;height: 30px;line-height: 8px" @click="sendEmail">
                  获取验证码
                </el-button>
              </div>
              <!--密码框-->
              <div class="form-group">
                <!-- <i class="bi bi-person"></i>-->
                <input type="password" v-model="pass" class="form-control"
                       placeholder="请输入你的密码"/>
              </div>
              <div class="form-group">
                <!-- <i class="bi bi-person"></i>-->
                <input type="password" v-model="r_pass" class="form-control"
                       placeholder="请再次输入你的密码"/>
              </div>
              <!--提交按钮-->
              <button type="button" class="btn btn-primary" @click="FindUser" style="width: 440px;height: 50px;">
                登&nbsp;&nbsp;&nbsp;录
              </button>
              <p></p>
              <div class="form-row mb-4 text-center">
                <h6 class="h">
                  <router-link to="login">已有账号,回到登录?</router-link>
                </h6>
              </div>

            </form>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <p>反馈建议 | 官方空间 | 空间活动 | 空间应用 | ABCmouse腾讯版 | 腾讯原创馆 | QQ互联 | QQ登录 | 社交组件 | 应用侵权投诉 | Complaint
        Guidelines</p>
      <p>Copyright 2005 - 2022 Tencent.All Rights Reserved.</p>
      <p><a href="https://beian.miit.gov.cn">湘ICP备2022018153号-1</a></p>
    </div>
  </div>
</template>

<script>
export default {
  name: "FindUser",
  data() {
    return {
      email: '',
      code: '',
      pass: '',
      r_pass: ''
    }
  },
  methods: {
    sendEmail() {
      if (this.isEmail(this.email)) { //true 是邮箱
        const form_table = new FormData;
        form_table.append("email", this.email)
        this.$http.post("/user/sendEmail", form_table).then((rep) => {
          this.$notify.info({
            title: '系统信息',
            message: rep.data.msg
          })
        }).catch((rep) => {
          alert(rep.data.msg)
        })
      } else {
        alert("请输入正确邮箱")
        this.email = '' //重置
      }
    },
    isEmail(strEmail) {
      if (strEmail.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1)
        return true;
      else
        return false;
    },
    FindUser() {
      if (this.r_pass == this.pass && this.code.length != 0 && this.r_pass.length != 0 && this.isEmail(this.email)) {
        const form_data = new FormData;
        form_data.append("email", this.email)
        form_data.append("code", this.code)
        form_data.append("pass", this.pass)
        this.$http.post("/user/findUser", form_data).then((rep) => {
          if (rep.data.code == 200) { //密码重置成功
            this.$router.push("/login")
            this.$notify.info({
              title: '系统信息',
              message: rep.data.msg
            })
          }
        }).catch((rep) => {
          console.log(rep)
        })
      } else {
        this.$notify.info({
          title: '系统信息',
          message: '请按要求填数据'
        })
      }
    }
  }
}
</script>

<style scoped>
#container {
  text-align: center;
  float: none;
}

#mynav {
  display: inline-block;
}

body {
  height: 100%;
  background: no-repeat center fixed;
  background-size: 100% 100%;
}

col img {
  background-size: 30px 40px;
}

.h {
  color: #d1ab25;
  text-align: center;
}

.nav {
  border: 1px solid #F5F5F5;
  width: 100%;
  font-size: 10px;
  background-color: #F5F5F5;
}

.nav a {
  margin-top: 5px;
  margin-bottom: 5px;
  cursor: pointer;
}

.nav .div {
  margin-left: 30px;
  color: #8D8D8D;
}

.nav .push {
  margin-left: 30px;
  color: #8D8D8D;
}

.nav .push img {
  width: 15px;
  margin-left: 10px;
}

.logo {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  margin-left: 150px;
  margin-top: 40px;
  color: #EB5E2A;
}

.logo p {
  font-size: 20px;
  margin-top: -10px;
  margin-left: 9px;
}

.logo h5 {
  color: #171A1D;
  margin-top: -80px;
  margin-left: 85px;
}

.button input {
  border-style: none;
  background-color: transparent;
  color: #EB5E2A;

}

.button {
  margin-top: -34px;
  margin-left: 260px;
}

.register {
  margin-top: 200px;
  margin-left: 600px;

}

.Email input {
  height: 30px;
  width: 300px;
  border: 1px solid #ADB5BD;
}

.captcha input {
  height: 30px;
  width: 300px;
  border: 1px solid #ADB5BD;
}

.password input {
  margin-top: 20px;
  height: 30px;
  width: 300px;
  border: 1px solid #ADB5BD;
}

.th button {
  margin-top: 40px;
  margin-left: 650px;
  width: 300px;
  background: linear-gradient(to right, #F9CF9B, #F5B095);
  border: #EB5E2A;

}

.cb {
  margin-top: 25px;
  margin-left: 650px;
  font-size: 10px;

}

.cb input {
  vertical-align: sub;

}


.footer {
  margin-top: 60px;
  border: 1px solid #fff;
  text-align: center;
  font-size: 10px;
  background-color: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
}

.footer p {
  margin-bottom: 0px;
}

.footer .p1 {
  border: 1px solid #fff;
  letter-spacing: 2px;
  margin-left: 4px;
}

.footer .p2 {
  letter-spacing: 2px;
  margin-left: -320px;
  margin-top: 5px;
}

.footer .p3 {
  letter-spacing: 2px;
  margin-right: 110px;
  margin-top: 5px;
}

.sign {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  margin-left: 150px;
  margin-top: 8px;
  color: #EB5E2A
}

.log h1 {
  font-size: 55px;
}

.log p {
  font-size: 3px;
  letter-spacing: 2px;
}

.btn csx {
  font-size: 30px;
}
</style>
